<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <child></child>
    </div>
    <script src="vue.js"></script>
    <script>
      // provide 和inject
      // 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深
      // 父组件
      var child = {
        name: 'childs',
        inject: ['myname'],
        template: `<div>父组件中的子组件：{{myname}}</div>`,
        data() {
          return {}
        },
        created() {
          console.log(this.myname)
        }
      }
      // 子组件

      var vm = new Vue({
        data() {
          return {}
        },
        provide: {
          myname: '小安'
        },
        components: {
          child: child
        }
      }).$mount('#app')
    </script>
  </body>
</html>
